<template>
  <div class="mask-tooltip-link" style="position:absolute;top:0;left:0;">
    <div class="link-tooltip">
      <p>这里可以查看您与连麦主播的匹配度哦~</p>
      <div class="blue-triangle down"></div>
        <div class="white-star to-left">
        <img src="../assets/images/guide-star.png" alt="">
      </div>
      <ul class="square s-right">
        <li v-for="(item,index) in 22" :key="index"></li>
      </ul>
      <ul class="square row-square">
        <li v-for="(v,i) in 22" :key="i"></li>
      </ul>
        <div class="transparent-circle transparent-right">
        <div class="circle"></div>
      </div>
      <div class="match-img-box">
        <img src="../assets/images/match.png" alt="">
      </div>
      <div class="operation-wrapper">
        <div class="btn-link">连麦</div>
        <ul class="square to-top-right">
          <li v-for="(v,i) in 22" :key="i"></li>
        </ul>
        <div class="transparent-circle transparent-center">
          <div class="circle"></div>
        </div>
        <div class="operation-explain">
          可点击连麦!
          <div class="blue-triangle triangle-center"></div>
        </div> 
        <div class="white-star to-left1">
          <img src="../assets/images/guide-star.png" alt="">
        </div>
        <!-- <div class="control-tooltip vertical-btn">
          <div class="next" @click="next(1)">跳过</div>
          <div class="stop" @click="stop1()">知道了</div>
        </div> -->
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
  .transparent-circle {
    position:absolute;
    top:42px;
    left:43px;
    z-index:10000;
    width:16px;
    height:16px;
    border-radius:50%;
    background:rgba(23,157,229,0.5);
    display:flex;
    justify-content: center;
    align-items:center;
  }
  .circle {
    width:8px;
    height:8px;
    border-radius:50%;
    background-color:#179de5;
  }
  .white-star {
    width:16px;
    height:16px;
    position:absolute;
    top:-6px;
    right:22px;
    z-index:1001;
  }
  .white-star img{
    width: 100%;
    height: 100%;
  }
  .link-tooltip,
  .fans-tooltip{
    width:267px;
    border-radius:31px;
    padding:14px 31px;
    word-wrap:break-word;
    box-sizing: border-box;
    position:absolute;
    top:160px;
    left:-2px;
    z-index:1000;
    background:linear-gradient(to right,#2aa3e4,#2ba3e4,#0f9ae5,#0096e6);
    color:#ffffff;
  }
  .link-tooltip p ,
  .fans-tooltip p{
    text-align: justify;
    line-height: 1.2;
    letter-spacing: 0.5px;
  }
  .square {
    position:absolute;
    top:0px;
    left:0px;
    z-index:1500;
    overflow: hidden;
  }
  .s-center {
    top:59px;
    left:49px;
  }
  .square li {
    width:2px;
    height:2px;
    border-radius:50%;
    background:#178ac7;
    margin:2px 0;
  }
  .blue-triangle{
    width:0px;
    height:0px;
    border:10px solid;
    position:absolute;
    top:-0;
    left:0;
    z-index:1000;
  }
  .up{
    border-color:transparent transparent #2aa3e4;
    top:-19px;
    left:42px;
  }
  .mask-tooltip-link {
    position: absolute;
    background:pink;
  }
  .link-tooltip {
    position:absolute;
    top:247px;
    z-index:100000;
  }
  .down {
    top:56px;
    left:174px;
    border-color:#0096e6 transparent transparent;
  }
  .to-left {
    top:-6px;
    left:18px;
  }
  .s-right {
    top:62px;
    left:184px;
  }
  .row-square {
    top:104px;
    left:227px;
    transform: rotate(90deg)
  }
  .transparent-right {
    top:140px;
    left:275px;
  }
  .match-img-box {
    width:114px;
    height:212px;
    position:absolute;
    top:40px;
    left:300px;
    z-index:1001;
  }
  .match-img-box img{
    width:100%;
    height:100%;
  }
  .operation-wrapper {
    position:absolute;
    top:127px;
    left:490px;
    z-index:1000;
  }
  .btn-link {
    width: 70px;
    height: 28px;
    background: #0096e6;
    color: #ffffff;
    text-align: center;
    line-height: 30px;
    border-radius: 15px;
    cursor: pointer;
    user-select: none;
  }
  .to-top-right {
    top:44px;
    left:37px;
  }
  .operation-explain {
    width:163px;
    height:60px;
    line-height:60px;
    text-align:center;
    color:#ffffff;
    border-radius:30px;
    user-select:none;
    background:linear-gradient(to right,#2aa3e4,#159de5,#0296e6);
    position:absolute;
    top: 138px;
    left:-85px;
  }
  .transparent-center {
    top:28px;
    left:30px;
  }
  .triangle-center {
    border-color:transparent transparent #0096e6;
    top: -16px;
    left: 112.8px;
  }
  .to-left1 {
    top:131px;
    left:-65px;
  }
  .vertical-btn {
    top: 220px;
    left: -44px;
  }
  .vertical-btn .stop {
    margin-top:20px;
  }
</style>
